<template>
  <div style="text-align:center">
    <input v-model="message">
  <listltem-base v-for="(item,index) in List" :key="index" :text="item" :index="index" @change="textChange"> </listltem-base>
    <button  class="btn" @click="resule" >添加</button>
  <span   class="item" v-if="flag">总数:{{List.length}}</span>
  </div>

</template>
<script>
import listltemBase from './listltemBase.vue';
export default {
  components: { listltemBase },
  data(){
    return {
      message: '',
      flag:false,
      List:[]
    }
  },
  methods:{
    appendMsg(){
      this.dataList.push(this.message);
    },
    textChange(text,index){
      this.$set(this.List,index,text)
    },

  


    resule:function(){
      if(this.message){
        this.List.push(this.message);
      if(this.List.length>0){
        this.flag=true;
        }
      }
    },
    handleRemove: function(index) {
      this.List.splice(index, 1)  
    }
  }
}
</script>
<style scoped>
.ipt{
  height: 40px;
  outline:none;

}
.btn{
  height: 40px;
  background: #40b883;
  color:white;
  margin-bottom:20px;
}
.item{
  width:200px;
  height: 40px;
  line-height: 40px;
  background: #40b883;
  color: white;
  border-bottom:1px solid #ccc ;
  margin: 0 auto; 
}
</style>